.ngw-feature-layer-feature-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-container);
    width: 100%;
    height: 100%;

    &,
    * {
        box-sizing: border-box;
    }

    .thead {
        position: relative;
        background-color: var(--color-alter);
        overflow-x: hidden;
        user-select: none;

        .tr {
            .th {
                display: flex;
                flex: 1;
                cursor: pointer;
                border-right-color: var(--color-border);
                min-width: 3em;

                &:hover {
                    background-color: var(--color-secondary);
                }

                .label {
                    flex-grow: 1;
                    min-width: 0;
                    overflow: hidden;
                    font-weight: bold;
                    text-overflow: ellipsis;
                }

                .suffix {
                    flex: 0 0 auto;

                    span.asc,
                    span.desc {
                        svg.icon {
                            margin: 0 -2px;
                        }
                    }

                    span.asc {
                        svg.icon {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }

        .handle {
            position: absolute;
            top: 0;
            bottom: 0;
            cursor: col-resize;

            &-dragging {
                background-color: rgba(127, 127, 127, 0.75);
            }
        }
    }

    .tbody-scroller {
        flex-grow: 1;
        border-spacing: 0;
        width: 100%;
        height: 0px;
        overflow-x: auto;
        overflow-y: scroll;

        .tbody {
            position: relative;
            width: 100%;

            .tr {
                position: absolute;
                top: 0;
                left: 0;
                cursor: pointer;
                min-width: 100%;

                .td {
                    flex: 0 0 auto;
                    overflow: clip;
                    text-overflow: ellipsis;

                    &.last-changed {
                        text-wrap: nowrap;
                    }
                }

                &:hover {
                    background-color: var(--color-alter);
                }

                &.selected {
                    background-color: var(--color-active);
                }
            }
        }
    }

    .tr {
        display: flex;
        flex-wrap: nowrap;
        border-bottom: 1px solid var(--color-border);
    }

    .td,
    .th {
        border-right: 1px solid var(--color-border);
        padding: 2px 4px;
    }
}
